<route>
    {
        meta: {
            layout: 'index',
            title:'井信息管理'
        }
    }  
</route>
<template>
    <a-row>
        <a-col :span="6">
            <WellAction></WellAction>
            <DeptSelectTree @confirm="deptSearch" @search="handleSearch"></DeptSelectTree>
            <!-- <WellTree @search="handleSearch" @confirm="openDash"></WellTree> -->
        </a-col>
        <a-col :span="18">
            <view v-if="selectedWell">
                <DashBoard v-model:value="selectedWell"></DashBoard>
            </view>
            <view v-else>
                <a-table :dataSource="tableData" :columns="columns">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'name'">
                            <a>
                                {{ record.name }}
                            </a>
                        </template>
                        <template v-else-if="column.key === 'action'">
                            <span>
                                <a-button type="primary" shape="round" :size="size" @click="openDash(record.id)">
                                    <template #icon>
                                        <line-chart-outlined />
                                    </template>
                                    控制台
                                </a-button>
                            </span>
                            <span>
                                <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="doDelete(record.id)">
                                    <a-button type="link" danger>删除</a-button>
                                </a-popconfirm></AntdZh>
                            </span>
                        </template>
                    </template>
                </a-table>
            </view>
        </a-col>
    </a-row>
</template>
<script setup>
import emitter from '@/utils/mitt'
import { LineChartOutlined } from '@ant-design/icons-vue'
import { columns, queryForm } from './index'
import { queryList, deleteOne } from '@/api/well/well.js'
import DeptSelectTree from '@/module/system/components/DeptSelectTree/index.vue'
import WellTree from './components/WellTree'
import DashBoard from './components/DashBoard'
import WellAction from './components/WellAction'
const tableData = ref([])
const selectedWell = ref(false)
const queryParams = ref(queryForm)
// 用井树相关查询
function handleSearch(key) {
    selectedWell.value = undefined
    queryParams.value.searchKey = key;
    queryList(queryParams.value).then(res => {
        //   console.log(res)
        tableData.value = res.content;
    })
    reset()
}
// 用部门树查询
function deptSearch(key) {
    selectedWell.value = undefined
    queryParams.value.deptId = key;
    queryParams.value.pageSize = 999
    queryList(queryParams.value).then(res => {
        console.log('res', res.content)
        tableData.value = res.content;
    })
    reset()
}
function doDelete(id) {
    deleteOne(id).then(res => {
        deptSearch()
    })
}
// 重置
function reset() {
    queryParams.value = { pageNum: 1, pageSize: 10, searchKey: '', }
}
// 打开控制面板
function openDash(e) {
    selectedWell.value = e;

}
function deptConfirm(e) {
    queryParams.value.deptId = e
    handleQuery()
}
</script>
  